<template>
  <div class="detail">
    <!-- 轮播图 -->
    <van-swipe style="height: 375px" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v, k) in gallery" :key="k">
        <img :src="v.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 福利 -->
    <div class="van-row">
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 6px; padding-right: 13.3333px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        30天无忧退货
      </div>
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 13.666667px; padding-right: 13.666667px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        48小时快速退费
      </div>
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 13.3333px; padding-right: 1.3333px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        满88元免邮费
      </div>
    </div>
    <!-- 介绍 -->
    <div class="info">
      <h2>{{ info.name }}</h2>
      <section>{{ info.goods_brief }}</section>
      <div class="price">￥ {{ info.retail_price }}.00 元</div>
    </div>
    <!-- 参数 -->
    <div class="canshu">
      <h2>商品参数</h2>
      <ul>
        <li data-v-14d957f8 v-for="(v, k) in attribute" :key="k">
          <span data-v-14d957f8>{{ attribute[k].name }}</span>
          <span class="goods-com">{{ attribute[k].value }}</span>
        </li>
      </ul>
    </div>
    <!-- 背景图 -->
    <div class="tupian">
      <div v-html="info.goods_desc"></div>
    </div>
    <!-- 常见问题和相关产品 -->
    <div class="issue">
      <div class="line_title">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <div class="line_content">
        <ul>
          <li v-for="(v, k) in issue" :key="k">
            <h3>{{ issue[k].question }}</h3>
            <p>{{ issue[k].answer }}</p>
          </li>
        </ul>
      </div>
      <div class="line_relate">
        <div class="line_title">
          <span></span>
          <h3>相关产品</h3>
        </div>
        <div class="goods_detail">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="(v, k) in goodsList"
              :key="k"
              @click="onClick(v.id)"
            >
              <van-image :src="v.list_pic_url" />
              <div class="desc">{{ v.name }}</div>
              <div class="price">￥ {{ v.retail_price }}.00 元</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>

    <!-- 商品导航 -->
    <div class="goods_bar">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="goodsCount"
        />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCar(value)"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <van-icon name="arrow-left" @click="Revert()" />
    <div class="zhezhaoceng">
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
          <div class="block" @click.stop>
            <div class="car-top">
              <div class="shopcar">
                <img :src="info.list_pic_url" alt="" />
              </div>
              <div class="shopcar-right">
                <van-icon name="cross" @click="carcancel()" />
                <section class="sty">
                  价格：￥ {{ info.retail_price }} 元
                </section>
                <section class="sty">库存：{{ info.goods_number }}</section>
              </div>
            </div>
            <div class="car-bottom">
              <section class="shuliang">数量：</section>
              <van-stepper v-model="value" />
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template> 

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import {
  GetDetails,
  GetRelate,
  GetCartindex,
  GetAddCart,
} from "@/request/api.js";
export default {
  data() {
    return {
      id: "",
      gallery: "",
      info: "",
      attribute: "",
      issue: "",
      goodsList: "",
      show: false,
      value: 1,
      productList: "",
      goodsCount: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    GetDetails({ id: this.id }).then((res) => {
      //    console.log(res);
      this.gallery = res.data.gallery;
      this.info = res.data.info;
      this.attribute = res.data.attribute;
      this.issue = res.data.issue;
      this.productList = res.data.productList;
    }),
      GetRelate({ id: this.id }).then((res) => {
        this.goodsList = res.data.goodsList;
      }),
      GetCartindex().then((res) => {
        console.log(res);
        this.goodsCount = res.data.cartTotal.goodsCount;
      });
  },
  methods: {
    //点击相关产品
    onClick(id) {
      GetDetails({ id: id }).then((res) => {
        this.gallery = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.issue = res.data.issue;
      }),
        (document.body.scrollTop = document.documentElement.scrollTop = 0);
    },
    // 返回到首页
    Revert() {
      this.$router.push({
        path: "/",
      });
    },
    //加如购物车
    addCar(v) {
      this.id = this.$route.query.id;
      if ((this.show = this.show)) {
        // console.log(v);
        if (v <= this.info.goods_number) {
          GetAddCart({
            goodsId: this.id,
            productId: this.productList[0].id,
            number: v,
          }).then((res) => {
            console.log(res);
            this.goodsCount = res.data.cartTotal.goodsCount;
            Toast.success("已加入购物车");
            this.$router.push({
              path: "/car",
            });
          });
        }
      } else {
        this.show = !this.show;
      }
    },
    // 取消加入购物车
    carcancel() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less">
.details {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.detail .van-swipe__track .van-swipe-item {
  // color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;

  img {
    width: 100%;
    height: 375px;
  }
}

.detail .van-row {
  padding-top: 1rem;
}
.detail .van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
  font-size: 13px;
}
.detail .info {
  width: 100%;
  height: 9rem;
  background-color: white;
  margin-top: 1.3rem;
  text-align: center;

  h2 {
    padding-top: 20px;
    font-size: 1.2rem;
    height: 40px;
  }
  section {
    display: block;
    color: #333;
    height: 40px;
    font-size: 14px;
  }
  .price {
    color: darkred;
    height: 0.4rem;
    font-size: 13px;
  }
}
.detail .canshu {
  width: 100%;
  background-color: white;
  margin-top: 30px;
  padding-bottom: 5px;
  h2 {
    padding-left: 10px;
    font-size: 20px;
    line-height: 40px;
  }
  ul li {
    font-size: 13px;
    background: #efefef;
    border-radius: 6px;
    height: 30px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    span[data-v-14d957f8] {
      color: #999;
      width: 20%;
      margin-right: 5px;
      text-align: right;
    }
    .goods-com {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.tupian p img {
  width: 100%;
  display: block;
}
.issue {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 50px;
}
.issue .line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: 18px;
  background: white;
}
.issue .line_title span {
  width: 50%;
  height: 2px;
  background: #ccc;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.issue .line_title h3 {
  width: 30%;
  height: 40px;
  background: #fff;
  position: absolute;
  text-align: center;
  line-height: 40px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.issue .line_content h3 {
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  position: relative;
  padding-right: 10px;
  // font-family: '宋体';
}
.issue .line_content p {
  padding-left: 20px;
  padding-right: 10px;
  color: #666;
  font-size: 13px;
}
.issue .line_content h3::before {
  content: "";
  width: 4px;
  height: 4px;
  background: darkred;
  border-radius: 50%;
  position: absolute;
  left: 8px;
  top: 50%;
  margin-top: -2px;
}
.issue .line_relate .line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: 18px;
  background: #fff;
  span {
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  h3 {
    width: 30%;
    height: 40px;
    background: #fff;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
.goods_detail {
  .desc {
    margin-top: 10px;
    font-size: 14px;
  }
  .price {
    font-size: 10px;
    color: darkred;
    margin-top: 10px;
  }
}
.goods_bar {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
}
.detail .van-icon-arrow-left {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 10px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.2);
}
.zhezhaoceng .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.zhezhaoceng .block {
  width: 100%;
  height: 250px;
  background-color: #fff;
  position: fixed;
  bottom: 20px;
}
.car-top {
  padding-top: 20px;
  display: flex;
  height: 100px;
}
.shopcar img {
  flex: 1;
  width: 100px;
  height: 100px;
}
.shopcar-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 10px;
  position: relative;
  .van-icon-cross {
    position: absolute;
    top: 0;
    right: 3px;
  }
  .sty {
    font-size: 13px;
    font-family: "宋体";
  }
}
.car-bottom {
  margin-top: 25px;
  margin-left: 10px;
  .shuliang {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
</style>